import React from "react";
import { Dropdown, Menu, Button } from "antd";
import { GlobalOutlined } from "@ant-design/icons";
import { useAppDispatch, useAppSelector } from "@/app/hooks";
import { changeLanguageActionCreate } from "@/app/language/languageActions";
export const LanguageComp: React.FC = () => {
  const language = useAppSelector((state) => state.language.language);
  const languageList = useAppSelector((state) => state.language.languageList);
  const dispatch = useAppDispatch();
  return (
    <Dropdown
      overlay={
        <Menu
          items={languageList.map((v) => {
            return {
              label: v.language,
              key: v.code,
            };
          })}
          onClick={(e) =>
            dispatch(changeLanguageActionCreate(e.key as "en" | "zh"))
          }
        ></Menu>
      }
      placement="bottomRight"
    >
      <Button icon={<GlobalOutlined />}>
        {language === "zh" ? "中文" : "English"}
      </Button>
    </Dropdown>
  );
};

